<template>
  <div class="css-module">
    <fieldset>
        <legend>grid布局</legend>
        <div class="container">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">
                    <section class="subContainer">
                        <div><input type="text" class="distInput"></div>
                        <div>省</div>
                        <div><input type="text" class="distInput"></div>
                        <div>市</div>
                        <div><input type="text" class="distInput"></div>
                        <div>区</div>
                        <div id="specialItem"><input style="width: 100%;" type="text" placeholder="请填写详细信息"></div>
                    </section>
                </div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">
                    <img src="../../assets/image01.jpg" alt="哈哈哈">
                    <dl>
                        <dt>aa</dt>
                        <dd>星垂平野阔，月涌大江流 暮色苍茫看劲松，乱云飞渡仍从容 我本楚狂人，凤歌笑孔丘 但使龙城飞将在，不叫胡马渡阴山 黄沙百战穿金甲，不破楼兰终不还。</dd>
                    </dl> 
                </div>
                <div class="item">9</div>
                <div class="item">10</div>
                <div class="item">11</div>
                <div class="item">12</div>
                <div class="item">13</div>
                <div class="item">14</div>
                <div class="item">15</div>
            </div>   
    </fieldset>
  </div>
</template>

<script>
export default {
  name: 'CssGrid',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body{
  margin: 0;
  padding: 0;
}
.container{
  display: grid;
  grid-template-columns: 200px 200px auto 200px 200px;
  grid-template-rows: auto;
  grid-gap: 30px;
}
.item{
  background-color: #efefef;
  align-items: center;
  justify-items: center;
  grid-row-start: auto; 
}
.subContainer{
  display: grid;
  grid-template-columns: auto 20px auto 20px auto 20px;
  grid-gap: .5em;
}
.distInput{
  width: 100%;
}
#specialItem{
  grid-column-start: 1;
  grid-column-end: 7;
}
img{
  float: left;
}
</style>
